<template>
  <div>
    <business-table :businessTableData="businessTableData" ref="businessTable"/>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      initDialogData: null,//存储dialog原始数据，初始化要用
      businessTableData: {
        //需要显示组件
        componentType: {
          title: true,//CommonTitle 组件是否显示
          tabs: true,//CommonTabs 组件是否显示
          table: true,//CommonTable 组件是否显示
          dialog: true,//CommonDialog 组件是否显示
        },
        //组件需要的接口和初始化方法名
        interfaceName: {
          init: 'a62',//初始化接口名称
          initMethodName: 'initData',//初始化方法名 默认初始化名称
          add: 'a63',//新增接口名称
          edit: 'a64',//修改接口名称
          del: 'a66',//删除接口
          status: '',//修改状态名称
          oneData: 'a65',//读取一条接口名称
        },

        //CommonTitle组件数据
        titleProp: {
          name: '角色管理',//标题名称
          class: '',//class名称
          operate: [{ //按钮集合
            show: true,//是否显示
            name: '添加角色',//按钮名称
            type: 'primary',//按钮颜色 primary success info warning danger text
            icon: 'el-icon-plus', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'addTitleClick', //按钮方法  业务组件方法名固定
            id: 20000,//权限 20000 默认显示
          }]
        },

        //CommonTabs组件数据
        tabsProp: {
          active: '1',//默认打开是什么状态 如未审核，已审核，全部的话是20000
          class: '',//class名称
          keywords: '',//搜索的值
          stretch: false,//标签的宽度是否自撑开 是 true 否 false
          tabsClick: 'tabsClick', //点击tabs方法名
          searchClick: 'tabsClick',// 搜索方法名 业务组件方法名固定
          heightSearchClick: 'tabsClick',//高级搜索点击确定 业务组件方法名固定
          inputShow: false,//搜索框是否显示 true 是 false 否
          heightShow: false,//是否有高级搜索 true 是 false 否
          heightSelectShow: false,//高级搜索是否默认下拉出来 true 是 false 否
          tabsSwitchField: 'status',//切换状态字段
          //tabs 标题
          tabsTitleProp: [
            {
              show: true,
              label: '已启动', //名称
              name: '1',//状态 全部是20000
              total: 0, //总数
            },
            {
              show: true,
              label: '未启动', //名称
              name: '0',//状态 全部是20000
              total: 0, //总数
            }],
          //高级搜索字段
          heightSearchProp: [],
          //高级搜索的值
          heightSearchData: {}
        },


        //CommonTable组件数据
        tableProp: {

          loading: false,//加载中 true  加载完成false
          class: '',//表格顶部div class
          index: true,//是否需要有序号
          selection: false,//是否是多选框
          selectionVal: 'id',// 开启多选获取的字段
          selectionId: [],// 开启多选后，选择哪几条
          isPage: true, //是否分页
          current_page: 1,//单前第几页
          pageSize: 30,//一页数量
          pageMethod: 'tablePageClick',//分页方法
          pageTotal: 10,//分页总数
          statusName: 'status',//状态字段名 已启动未启动等状态按钮显示还是隐藏
          //字段配置
          tableListProp: [
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '角色名称',//表头
              field: 'a1',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharacters',
            },
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '修改日期',//表头
              field: 'a2',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'timeStamp',
              jsonName: '',//是json里面的字段
              timeType: true,//显示时间是否到时分秒 true 是 false 没有时分秒就一个日期
            },
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '操作',//表头
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              isWidth: true,//是否是固定长度 true 是 false 否
              width: '320px',//长度
              tooltip: false,//是否超长tip
              class: '',//表格class
              type: 'operation',
            }],
          //操作按钮配置
          operate: [
            { //按钮集合
              name: '编辑',//按钮名称
              type: 'warning',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-edit', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableEditClick', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            },
            {
              name: '关闭',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableClick2', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '1',//状态值
            },
            {
              name: '启动',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableClick3', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '0',//状态值
            },
            {
              name: '删除',//按钮名称
              type: 'danger',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-delete', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableDelClick', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }],
          //table 数据
          tableData: [
            // {
            //   id:'',
            //   a1:'角色名称',//角色名称
            //   a2:'创建日期',//创建日期
            // }
          ],
        },

        //CommonDialog组件数据
        dialogProp: { //设置组件属性
          isDialog: false,//dialog 默认是否显示 true 是 false 否
          loading: false,//加载圈圈
          dialogTitle: '编辑',//dialog标题co
          dialogTop: '15vh',//dialog 头部距离
          dialogWidth: '600px',//dialog 长度
          formRef: 'ruleForm',//ref名称
          formLabelWidth: "120",//label 长度
          formClass: '',//添加的class 多个用空格隔开
          //表单配置
          formListProp: [
            {
              show: true,//是否显示 true 显示，false 不显示
              label: '角色名称',//名称
              field: 'a1',//字段名
              itemClass: '',//这行的class
              width: '',// 输入框等长度
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              rules: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
              changeMethod: '',//方法名
              type: 'input',//数据类型
            }
            ,
            {
              show: true,//是否显示 true 显示，false 不显示
              label: '角色状态',//名称
              field: 'a2',//字段名
              itemClass: '',//这行的class
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              width: '440',//长度
              changeMethod: '',//方法名
              rules: [{required: true, message: '请选择角色状态', trigger: 'change'}],
              type: 'radio',//数据类型
              //选择的值
              prop: [
                {label: '已启动', value: 1},
                {label: '未启动', value: 0},
              ]
            }, {
              show: true,//是否显示 true 显示 false 不显示
              label: '权限设置',//名称
              itemClass: '',//这行的class
              width: '',//长度
              type: 'titleChild',//数据类型
            },
            {
              show: true,//是否显示 true 显示，false 不显示
              label: '',//名称
              field: 'jurisdiction_id_json',//字段名
              itemClass: 'child-role',//这行的class
              rules: [],
              type: 'customRoleTree',//数据类型
              customData: {
                ref: 'treeFather',
                name: 'CommonRoleTree',//组件名称
              },
            },
          ],
          //按钮配置
          dialogBut: { //dialog 按钮
            class: '',//class
            operate: [{ //按钮集合 取消和确定方法名不要变，自动生成
              name: '取消',//按钮名称
              type: '',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-close', //图标
              plain: true,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogCancel', //按钮方法
              id: '20000',//权限 20000 默认显示
            }, { //按钮集合
              name: '确定',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogDetermine', //按钮方法
              id: '20000',//权限 20000 默认显示
            }]
          },
          //修改按钮id不为空 编辑点击确定的时候传过去的值
          formData: {
            id: '',
            a1: '',//角色名称
            a2: 1,//角色状态
            jurisdiction_id_json: '',
          },
          roleDialogProp: {
            treeData: [], //树数据
            defaultTree: [],//树形 默认打开
            defaultProps: {
              children: 'children',
              label: 'jurisdiction_name',
            },
          },
        },

      }
    };
  },
  mounted() {
    //把dialog原始数据存储
    if (this.businessTableData.componentType.dialog) {
      this.initDialogData = JSON.parse(JSON.stringify(this.businessTableData.dialogProp.formData));
    }
    //初始化
    this.initData();
    this.jurisdictionAll();
  },
  methods: {
    //拉取所有权限列表
    jurisdictionAll() {
      this.$a67().then((result) => {
        console.log(result)
        this.businessTableData.dialogProp.roleDialogProp.treeData = result;
      })
    },
    //初始化
    initData() {
      this.businessTableData.tableProp.loading = true;
      let params = {};
      //是否有初始状态
      if (this.businessTableData.tabsProp.tabsSwitchField !== '') {
        params[this.businessTableData.tabsProp.tabsSwitchField] = Number(this.businessTableData.tabsProp.active);
      } else {
        params[this.businessTableData.tabsProp.tabsSwitchField] = '';
      }
      //当前第几页
      params.page = this.businessTableData.tableProp.current_page;
      //调用初始化接口
      if (this.businessTableData.interfaceName.init !== '') {
        this['$' + this.businessTableData.interfaceName.init](params).then((result) => {
          this.businessTableData.tableProp.current_page = result.current_page;//单前页
          this.businessTableData.tableProp.pageTotal = result.total;//总数
          this.businessTableData.tableProp.pageSize = result.per_page;//每页多少条
          this.businessTableData.tableProp.loading = false;
          this.businessTableData.tableProp.tableData = result.data.map(item => ({
            id: item.id,
            a1: item.group_name,//角色名称
            a2: item.updated_at,//创建日期
            status: item.status
          }));
        })
      }
    },
    //CommonTitle组件 添加账号 按钮点击
    addTitleClick(item) {
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      this.businessTableData.dialogProp.roleDialogProp.defaultTree = this.$options.data().businessTableData.dialogProp.roleDialogProp.defaultTree;
      this.$nextTick(function () {
        //Dom更新完毕
        this.$refs['businessTable'].$refs['businessCommonDialog'].$refs['treeFather'][0].$refs['tree'].setCheckedKeys([]);
      });
      this.businessTableData.dialogProp.isDialog = true;
      this.businessTableData.dialogProp.loading = false;
    },
    //CommonTabs组件 点击搜索 点击tabs状态 时候调用的方法
    tabsClick() {
      if (this.businessTableData.tableProp != undefined) {
        this.businessTableData.tableProp.current_page = 1;
      }
      this.initData();
    },


    //CommonTable组件
    //编辑按钮
    tableEditClick(row, item) {
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      let params = {id: row.id};
      this.businessTableData.dialogProp.loading = true;
      this.businessTableData.dialogProp.isDialog = true;
      if (this.businessTableData.interfaceName.oneData !== '') {
        this['$' + this.businessTableData.interfaceName.oneData](params).then((result) => {
          this.businessTableData.dialogProp.formData.id = result.id;
          this.businessTableData.dialogProp.formData.a1 = result.group_name;//角色名称
          this.businessTableData.dialogProp.formData.a2 = result.status;//角色状态
          //树形
          this.businessTableData.dialogProp.roleDialogProp.defaultTree=JSON.parse(result.jurisdiction_id_json).all;
          this.$nextTick(function () {
            //Dom更新完毕
            this.$refs['businessTable'].$refs['businessCommonDialog'].$refs['treeFather'][0].$refs['tree'].setCheckedKeys(this.businessTableData.dialogProp.roleDialogProp.defaultTree);
          });
          this.businessTableData.dialogProp.loading = false;
        })
      }
    },

    //关闭状态点击
    tableClick2(row){
      console.log(row)
      let data = {
        id: row.id,
        group_name: row.a1,
        status: 0
      }
      this.$a64(data).then(() => {
        this.$message.success('关闭成功');
        this.initData();
      })
    },
    //启动状态点击
    tableClick3(row){
      console.log(row)
      let data = {
        id: row.id,
        group_name: row.a1,
        status: 1
      }
      this.$a64(data).then(() => {
        this.$message.success('开启成功');
        this.initData();
      })
    },

    //删除按钮
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        if (this.businessTableData.interfaceName.del !== '') {
          this['$' + this.businessTableData.interfaceName.del](data).then(() => {
            this.$message.success('删除成功');
            this.initData();
          })
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 分页按钮
    tablePageClick(page) {
      this.businessTableData.tableProp.current_page = page;
      this.initData();
    },

    //CommonDialog组件
    //取消按钮
    dialogCancel() {
      this.businessTableData.dialogProp.isDialog = false;
    },

    //确定按钮
    dialogDetermine() {
      this.$refs['businessTable'].$refs['businessCommonDialog'].$refs[this.businessTableData.dialogProp.formRef].validate((valid) => {
        if (valid) {
          let data = {
            id: this.businessTableData.dialogProp.formData.id,
            group_name: this.businessTableData.dialogProp.formData.a1,//角色名称
            status: this.businessTableData.dialogProp.formData.a2,//角色状态
          };
          let menu_ids=this.$refs['businessTable'].$refs['businessCommonDialog'].$refs['treeFather'][0].$refs['tree'].getCheckedKeys(); //获取树数据
          let menu_id= this.$refs['businessTable'].$refs['businessCommonDialog'].$refs['treeFather'][0].$refs['tree'].getHalfCheckedKeys();//半选数据
          let jurisdiction_id_json= {all:menu_ids,one:menu_id};
          data.jurisdiction_id_json=JSON.stringify(jurisdiction_id_json) //获取树数据
          if (this.businessTableData.dialogProp.formData.id == '') {
            if (this.businessTableData.interfaceName.add !== '') {
              this['$' + this.businessTableData.interfaceName.add](data).then(() => {
                this.$message.success('提交成功');
                this.businessTableData.dialogProp.isDialog = false;
                this.initData();
              })
            }
          } else {
            if (this.businessTableData.interfaceName.edit !== '') {
              this['$' + this.businessTableData.interfaceName.edit](data).then(() => {
                this.$message.success('修改成功');
                this.businessTableData.dialogProp.isDialog = false;
                this.initData();
              })

            }

          }
        } else {
          console.log('验证没过!!');
          return false;
        }
      })
    }

  },
};
</script>
<style lang="scss">
.child-role .el-form-item__content {
  margin:0 0 0 30px !important;
}
</style>}

